<template>
  <div id="building">
    <div class="box1">
      
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-position="right"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item  label="欢迎登录志愿者培训系统后台">
        </el-form-item>

        <el-form-item label="用户名" prop="userName">
          <el-input v-model="loginForm.userName"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="passWord">
          <el-input type="password" v-model="loginForm.passWord"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
  
<script>
import { login as l } from "@/api/login";
export default {
  name: "LoginView",
  data() {
    return {
      loginForm: {
        userName: "13853108236",
        passWord: "108236",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {},

  methods: {
    async login() {
      // this.$refs['loginForm']
      this.$refs.loginForm.validate(async (v) => {
        if (v) {
          // 所有的校验都通过了  true
          const res = await l(this.loginForm);
          if (res.code == 1) {
            this.$message({
              message: "恭喜你，登录成功",
              type: "success",
            });
            localStorage.setItem("token-sqf", res.token);
            location.href = "/";
          }
          location.href = "/Index";
        } else {
          this.$message({
            message: "写错了",
            type: "error",
          });
        }
      });
    },
  },
};
</script>


<style scoped lang="scss" >
.box1 {
  background-color: rgb(68, 20, 20);
  width: 300px;
  height: 365px;
  position: absolute;
  right: 160px;
  top: 50%;
  transform: translateY(-60%);
}


.div {
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
* {
  margin: -8px;
  padding: 0;
  border: 0;
}
#building {
  background: url("../../image/1.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.login-box {
  border: 1px solid #dccfcf;
  width: 350px;
  margin: 180px auto;
  padding: 35px 80px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color: rgba(255, 255, 255, 0.7);
}
</style>